<!doctype html>
<html class="no-js">
<head>
    <title>ZTE 中兴金融科技</title>
    {{include 'base/style.html'}}
    <link rel="stylesheet" href="{{=URL('static','assets/css/amazeui.tagsinput.css')}}">
<style>
  .am-tagsinput {
    width: 80%;

  }
  /*.twitter-typeahead{*/
    /*min-width: 100%;*/
  /*}*/
</style>

<style>
  .twitter-typeahead .tt-query,
  .twitter-typeahead .tt-hint {
    margin-bottom: 0;
  }

  .twitter-typeahead .tt-hint
  {
    display: none;
  }

  .tt-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
  }
  .tt-suggestion > p {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: nowrap;
    margin: 0;
  }
  .tt-suggestion > p:hover,
  .tt-suggestion > p:focus,
  .tt-suggestion.tt-cursor p {
    color: #ffffff;
    text-decoration: none;
    outline: 0;
    background-color: #428bca;
  }


 .ul-context-menu {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9999;
    min-width: 80px;
    display: none;
    font-family: 微软雅黑;
    font-size: 14px;
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    list-style: none;
    padding: 5px 0px;
    margin: 0px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.15);
    border-image: initial;
    border-radius: 4px;
}

   .ui-context-menu-item a{
	display: block;
	padding: 0 10px;
	color: #eefff2;
	white-space: nowrap;
	text-decoration: none;
    cursor: pointer;
}

   .ui-context-menu-item a:hover {
	text-decoration: none;
	color: #1cfd59;
}

  .image1{
        width:200px;
        height:200px;
        border-radius:200px;
    }
  .image2{
        width:200px;
        height:200px;
        border-radius:20px;
    }

</style>

</head>

<body>

    <div class=" am-cf" >
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 " >
            <div class="widget am-cf">
                <div class=" widget-body-md widget-body tpl-amendment-echarts am-fr"  id="queryecharts">

                </div>
                    <a class="am-badge am-badge-warning" style="display:none" id="demo1">demo</a>
                    <a class="am-badge am-badge-primary" style="display:none" id="demo2">demo</a>
                    <a class="am-badge am-badge-primary" style="display:none" id="demo3">demo</a>
                    <span class="am-badge am-badge-secondary" id="querytime"></span>
                    <span class="am-badge am-badge-success" id="graphtime"></span>

            </div>
        </div>
    </div>
    <div class=" am-cf" >
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 widget-margin-bottom-lg" >
            <div class="widget am-cf">
                <div id="tool">
                </div>
                <div class=" widget-body-md widget-body tpl-amendment-echarts am-fr" style="min-height: 722px;" id="tpl-echarts">

                </div>

                <div id="menuuu" style="width: 110px; background-color: rgb(51, 51, 51);" class="ul-context-menu"  onMouseLeave ="this.style.display = 'none';"></div>

            </div>
        </div>
    </div>

<div class="am-modal am-modal-prompt" tabindex="-1" id="my-startnode">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">编辑开始实体</div>
    <div class="am-modal-bd">

        <p>
      <input type="text" class="am-modal-prompt-input" id="startnode">
      <input type="text" class="am-modal-prompt-input" id="startnode_prokey">
         </p>
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>提交</span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-prompt" tabindex="-1" id="my-endnode">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">编辑结束实体</div>
    <div class="am-modal-bd">

      <input type="text" class="am-modal-prompt-input" id="endnode">
        <input type="text" class="am-modal-prompt-input" id="endnode_prokey">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>提交</span>
    </div>
  </div>
</div>
<div class="am-modal am-modal-prompt" tabindex="-1" id="my-relkey">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">编辑边关系</div>
    <div class="am-modal-bd">
      <input type="text" class="am-modal-prompt-input" id="relkey">
      <input type="text" class="am-modal-prompt-input" id="relkey_prokey">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>提交</span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-prompt" tabindex="-1" id="my-levkey">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">编辑关联层数</div>
    <div class="am-modal-bd">
      <input type="text" class="am-modal-prompt-input" id="levkey">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>提交</span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-prompt" tabindex="-1" id="my-count">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">结果条数</div>
    <div class="am-modal-bd">
      <select data-am-selected="{btnWidth: '100%',btnSize: 'sm'}">
                                      <option value="50">50</option>
                                      <option value="100">100</option>
                                      <option value="500">500</option>
                                      <option value="1000">1000</option>
                                      <option value="2000">2000</option>
                                    </select>
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>提交</span>
    </div>
  </div>
</div>


<div class="am-modal am-modal-prompt" tabindex="-1" id="my-addnode">
  <div class="am-modal-dialog">
    <div id="my-addnode-edit" class="am-modal-hd">添加节点</div>
    <div class="am-modal-bd">
      <p>
      <input placeholder="输入节点名称" type="text" class="am-modal-prompt-input" id="addnode">
      <input placeholder="输入节点属性" type="text" class="am-modal-prompt-input" id="addnode_prokey">
      <input placeholder="输入关系名称" type="text" class="am-modal-prompt-input" id="addrelkey">
      <input placeholder="输入关系属性" type="text" class="am-modal-prompt-input" id="addrelkey_prokey">
      </p>
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>提交</span>
    </div>
  </div>
</div>


{{include 'base/jsFile.html'}}
    <script src="{{=URL('static','assets/js/typeahead.js')}}?v2019"></script>
<script src="{{=URL('static','assets/js/amazeui.tagsinput.min.js')}}"></script>
<script src="{{=URL('static','assets/js/echarts.min.js')}}?v20181"></script>

<script>
 var arr=['am-badge am-badge-primary','am-badge am-badge-danger','am-badge am-badge-success','am-badge','am-badge am-badge-warning'];

 var echartsA = echarts.init(document.getElementById('queryecharts'));

$(function() {

    var labelss=[{{for rows in labels:}} {name:' {{=rows}}'},{{pass}}]
    var nodelabel = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: labelss
    });
    nodelabel.initialize();
    var pros=[{{for rows in pros:}} {name:' {{=rows}}'},{{pass}}]
    var propertykey = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: pros
    });
    propertykey.initialize();

    $('#startnode').tagsinput({
          typeaheadjs: {
            name: 'nodelabel',
            displayKey: 'name',
            valueKey: 'name',
            source: nodelabel.ttAdapter()
          },
          tagClass: function(item) {
              return arr[Math.floor(Math.random()*arr.length)];
          }
        });
    $('#startnode_prokey').tagsinput({
          typeaheadjs: {
            name: 'propertykey',
            displayKey: 'name',
            valueKey: 'name',
            source: propertykey.ttAdapter()
          },
          tagClass: function(item) {
              return arr[Math.floor(Math.random()*arr.length)];
          }
        });
    $('#endnode').tagsinput({
          typeaheadjs: {
            name: 'nodelabel',
            displayKey: 'name',
            valueKey: 'name',
            source: nodelabel.ttAdapter()
          },
          tagClass: function(item) {
              return arr[Math.floor(Math.random()*arr.length)];
          }
        });
    $('#endnode_prokey').tagsinput({
          typeaheadjs: {
            name: 'propertykey',
            displayKey: 'name',
            valueKey: 'name',
            source: propertykey.ttAdapter()
          },
          tagClass: function(item) {
              return arr[Math.floor(Math.random()*arr.length)];
          }
        });
    $('#relkey').tagsinput({
          typeaheadjs: {
            name: 'nodelabel',
            displayKey: 'name',
            valueKey: 'name',
            source: nodelabel.ttAdapter()
          },
          tagClass: function(item) {
              return arr[Math.floor(Math.random()*arr.length)];
          }
        });
    $('#relkey_prokey').tagsinput({
          typeaheadjs: {
            name: 'propertykey',
            displayKey: 'name',
            valueKey: 'name',
            source: propertykey.ttAdapter()
          },
          tagClass: function(item) {
              return arr[Math.floor(Math.random()*arr.length)];
          }
        });

    $('#addnode').tagsinput({
          typeaheadjs: {
            name: 'nodelabel',
            displayKey: 'name',
            valueKey: 'name',
            source: nodelabel.ttAdapter()
          },
          tagClass: function(item) {
              return arr[Math.floor(Math.random()*arr.length)];
          }
        });
    $('#addnode_prokey').tagsinput({
          typeaheadjs: {
            name: 'propertykey',
            displayKey: 'name',
            valueKey: 'name',
            source: propertykey.ttAdapter()
          },
          tagClass: function(item) {
              return arr[Math.floor(Math.random()*arr.length)];
          }
        });
   $('#addrelkey').tagsinput({
          typeaheadjs: {
            name: 'nodelabel',
            displayKey: 'name',
            valueKey: 'name',
            source: nodelabel.ttAdapter()
          },
          tagClass: function(item) {
              return arr[Math.floor(Math.random()*arr.length)];
          }
        });
    $('#addrelkey_prokey').tagsinput({
          typeaheadjs: {
            name: 'propertykey',
            displayKey: 'name',
            valueKey: 'name',
            source: propertykey.ttAdapter()
          },
          tagClass: function(item) {
              return arr[Math.floor(Math.random()*arr.length)];
          }
        });

forceOption = {
        title: {
            text: 'CURD',
            x:'center',
            y:'20',
            textStyle:{
                fontWeight:'normal',
            }
        },
        "tooltip": {
            "formatter": function(param) {
                if (param.dataType === 'edge') {
                    return "<span class='am-badge am-badge-warning'>Relationship Types:"+param.data.name+"</span></br><span class='am-badge am-badge-success'>Property Keys:"+param.data.prokey+"</span></br>";
                }
                if (param.data.id==3){
                    return "<span class='am-badge am-badge-success'>关联层数:"+param.data.name+"</span></br>"
                }
                if (param.data.id==4){
                    return ""
                }
                if (param.data.id==5){
                    return "<span class='am-badge am-badge-success'>结果条数:"+param.data.name+"</span></br>"
                }
                return "<span class='am-badge am-badge-warning'>Node Labels:"+param.data.name+"</span></br><span class='am-badge am-badge-success'>Property Keys:"+param.data.prokey+"</span></br>";
            }
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        textStyle: {
                color:'#000'
        },
        series : [
            {
                type: 'graph',
                tooltip: {
                        backgroundColor:'skyblue',
//                      formatter: "{b} <br/>{a} : {c} h "
                },
                layout: 'none',
                symbolSize: 10,
                roam: true,
                label: {
                    normal: {
                        show: true,
                        color:'#fff'
                    }
                },
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 10],
                edgeLabel: {
                    normal: {
                        show: true,
                        textStyle: {
                            fontSize: 14
                        },
                        color:'#740f7d',
                        formatter: function(param) {
                            return param.data.name;
                        }
                    }
                },
                data: [{
                    id:1,
                    name: '',
                    prokey:"",
                    x: 100,
                    y: 300,
                    value:35,
                    symbol:'roundRect', //让节点为矩形显示
                    symbolSize: [100,80],//节点的长和宽
                    itemStyle: {
                        normal: {
                            color: '#0e90d2'
                        }
                    },
                    "draggable": "true"
                }, {
                    id:2,
                    name: '',
                    prokey:"",
                    x: 200,
                    y: 300,
                    symbol:'roundRect',
                    symbolSize: [100,80],
                    value:45,
                    itemStyle: {
                        normal: {
                            color: '#5eb95e'
                        }
                    },
                    "draggable": "true"
                }, {
                    id:3,
                    name: '1',
                    prokey: "",
                    x: 160,
                    y: 300,
                    value: 1,
                    symbol: 'circle', //让节点为矩形显示
                    symbolSize: [30, 30],//节点的长和宽
                    itemStyle: {
                        normal: {
                            color: '#85cc21'
                        }
                    },
                    "draggable": "true"
                }, {
                    id:4,
                    name: '搜索',
                    prokey: "",
                    x: 165,
                    y: 306,
                    value: 1,
                    symbol: 'roundRect', //让节点为矩形显示
                    symbolSize: [70, 30],//节点的长和宽
                    itemStyle: {
                        normal: {
                            color: '#8fa8ad'
                        }
                    },
                    "draggable": "true"
                }, {
                    id:5,
                    name: '50',
                    prokey: "",
                    x: 215,
                    y: 303,
                    value: 1,
                    symbol: 'roundRect', //让节点为矩形显示
                    symbolSize: [30, 30],//节点的长和宽
                    itemStyle: {
                        normal: {
                            color: '#fec611'
                        }
                    },
                    "draggable": "true"
                }
                ],
                links: [
                {   name:"",
                    prokey:"",
                    source: 0,
                    target: 1,

                }
                ],
                lineStyle: {
                    normal: {
                        opacity: 0.9,
                        width: 2,
                        curveness: 0
                    }
                }
            }
        ]
    };


            echartsA.setOption(forceOption);

                echartsA.on('click', function (params) {
//                console.log(params);//dataIndex data
                var options = echartsA.getOption();//获取已生成图形的Option
                var nodesOption = options.series[0].data;//获得所有节点的数组
                var linksOption = options.series[0].links;
//                nodesOption.splice(params.dataIndex, 1);

                var dataIndex=  params.dataIndex;
                var dataType =params.dataType
//                console.log(options,params,123);
//                echartsA.setOption(options);

                if(3==dataIndex&&"node"==dataType){
                    echartsA.showLoading('default', {text:'搜索中，请稍候...'});
                            $.ajax({
                                url:"{{=URL('admin','graphCrudResult.json')}}",
                                type: "POST",
                                data:JSON.stringify(options),
                                headers:{
                                    "cube_user_token":"123token",
                                    "Content-Type":"application/json"
                                },
                                contentType: 'text/html; charset=UTF-8',
                                dataType: "json",
                                success: function(data) {
                                    setMap(data);
                                },
                                error: function(XMLHttpRequest, textStatus, errorThrown) {
                                    alert(errorThrown);
                                },
                                complete: function(XMLHttpRequest, textStatus) {
//                                    $btn.button('reset');
                                    echartsA.hideLoading();
                                }

                            });
                    return;
                }


                if(0==dataIndex&&"node"==dataType){
//                    $('#startnode').val(params.data.name)
                    $('#startnode').tagsinput('removeAll');
                    $('#startnode').tagsinput('add', params.data.name);
                    $('#startnode_prokey').tagsinput('removeAll');
                    $('#startnode_prokey').tagsinput('add', params.data.prokey);
                    $('#my-startnode').modal({
                      dimmer:false,
                      relatedTarget: echartsA,
                      onConfirm: function(e) {
                          var options=this.relatedTarget.getOption()
                          var nodesOption =options.series[0].data;
                          var linksOption = options.series[0].links;
                          console.info(e);
                          nodesOption[0].name=e.data[0]||'';
                          nodesOption[0].prokey=e.data[1]||'';
                          echartsA.setOption(options);
                      }
                    });
                    return;
                }
                if(1==dataIndex&&"node"==dataType){
                    $('#endnode').tagsinput('removeAll');
                    $('#endnode').tagsinput('add', params.data.name);
                    $('#endnode_prokey').tagsinput('removeAll');
                    $('#endnode_prokey').tagsinput('add', params.data.prokey);
                    $('#my-endnode').modal({
                      dimmer:false,
                      relatedTarget: echartsA,
                      onConfirm: function(e) {
                          var options=this.relatedTarget.getOption()
                          var nodesOption =options.series[0].data;
                          var linksOption = options.series[0].links;
                          nodesOption[1].name=e.data[0]||'';
                          nodesOption[1].prokey=e.data[1]||'';
                          echartsA.setOption(options);
                      }
                    });
                    return;
                }
                if(2==dataIndex&&"node"==dataType){
                    $('#levkey').val( params.data.name);
                    $('#my-levkey').modal({
                      dimmer:false,
                      relatedTarget: echartsA,
                      onConfirm: function(e) {
                          var options=this.relatedTarget.getOption()
                          var nodesOption =options.series[0].data;
                          var linksOption = options.series[0].links;
                          nodesOption[2].name=e.data||'';
                          echartsA.setOption(options);
                      }
                    });
                }
                if(4==dataIndex&&"node"==dataType){
                    $('select').val(params.data.name)
                    $('#my-count').modal({
                      dimmer:false,
                      relatedTarget: echartsA,
                      onConfirm: function(e) {
                          var options=this.relatedTarget.getOption()
                          var nodesOption =options.series[0].data;
                          var linksOption = options.series[0].links;
                          nodesOption[4].name=$('select').val()||'';
                          echartsA.setOption(options);
                      }
                    });
                    return;
                }
                if(0==dataIndex&&"edge"==dataType){
                    $('#relkey').tagsinput('removeAll');
                    $('#relkey').tagsinput('add', params.data.name);
                    $('#relkey_prokey').tagsinput('removeAll');
                    $('#relkey_prokey').tagsinput('add', params.data.prokey);
                    $('#my-relkey').modal({
                      dimmer:false,
                      relatedTarget: echartsA,
                      onConfirm: function(e) {
                          var options=this.relatedTarget.getOption()
                          var nodesOption =options.series[0].data;
                          var linksOption = options.series[0].links;
                          linksOption[0].name=e.data[0]||'';
                          linksOption[0].prokey=e.data[1]||'';
                          echartsA.setOption(options);
                      }
                    });
                    return;
                }

            });


});

$("#demo1").click(function () {
                var options = echartsA.getOption();//获取已生成图形的Option
                var nodesOption = options.series[0].data;//获得所有节点的数组
                var linksOption = options.series[0].links;
                nodesOption[0].name='zte_zhanghao';
                nodesOption[0].prokey='id:"6246133541279485"';
                nodesOption[1].name='';
                nodesOption[1].prokey='';
                 nodesOption[0].name='baidu';
                nodesOption[0].prokey='name:"刘德华"';
                nodesOption[1].name='';
                nodesOption[1].prokey='';
//                linksOption[0].name='zte_zhuanzhang'
                echartsA.setOption(options);

});
$("#demo2").click(function () {
                var options = echartsA.getOption();//获取已生成图形的Option
                var nodesOption = options.series[0].data;//获得所有节点的数组
                var linksOption = options.series[0].links;
                nodesOption[0].name='zte_zhanghao';
                nodesOption[0].prokey='id:"6246133541279485"';
                nodesOption[1].name='zte_zhanghao';
                nodesOption[1].prokey='id:"6236033335114579"';
//                linksOption[0].name='zte_zhuanzhang'
                echartsA.setOption(options);

});

 var echartsB = echarts.init(document.getElementById('tpl-echarts'));
function setMap(data) {

   if(data.data.length==0){
       alert("没查询到数据");
       return;
   }
    var start = new Date().getTime();
    option = {
                        "title": {
                            "text": ""
                        },
                        "legend": [{
                            "data":['1','2']
                        }],
                        "series": [{
                            "label": {
                                "normal": {
                                    "show": true,
                                    "textStyle": {
                                        "fontSize": 12
                                    },
//                                    position: 'top',
                                    formatter: function(param) {
                                        return param.data._name;
                                    }
                                }

                            },
                            "circular": {
                                "rotateLabel": true
                            },
                            "focusNodeAdjacency": false,
                            "roam": true,
                            "top": 150,
                            "bottom": 80,
                            "data":  data.data,
                            "links": data.link,//[{"source":1,"target":2}]
                            "layout": "force",  //force是力向图，circular是和弦图
                            "force": {
                                "repulsion": 500,
                                "edgeLength" :120,
                            },
                            "symbolSize": 55,
                            edgeSymbol: ['none', 'arrow'],
                            "edgeLabel": {
                                "normal": {
                                    "show": true,
                                    "textStyle": {
                                        "fontSize": 11
                                    },
                                    formatter: function(param) {

                                        return param.data._name;
                                    }
                                }
                            },

                            "lineStyle": {
                                "normal": {
                                    "width": 1,
                                    "curveness": 0,
                                    "opacity": 0.9
                                }
                            },
                            "type": "graph",
                            "categories": data.categorys
                        }],
                        "animationEasingUpdate": "quinticInOut",
                        "tooltip": {
                            "formatter": function(param) {
//                                    if (param.dataType === 'edge') {
////                                         return 1;
//                                        return param.data.category + ': ' + param.data.target;
//                                    }
                                var s=""
                                for(i in param.data){
                                    if(i.indexOf("_")==0){
                                        if(i=='_src'){
                                          s=s+"<span><img class='image2' src='"+param.data[i] +"'></img></span></br>"
                                        }else{
                                          s=s+"<span class='"+arr[Math.floor(Math.random()*arr.length)]+"'>"+i.substring(1)+":"+param.data[i]+"</span></br>"
                                        }

                                    }
                                }

//                                    return JSON.stringify(param.data);
                                return s;
                            }
                        },
                        "animationDurationUpdate": 1500
                    };

        echartsB.setOption(option);
        var end = new Date().getTime();
        $('#querytime').text(data.time+"ms" );
        $('#graphtime').text((end-start)+"ms");

}

    function uq(arr1,arr2,key) {
        for(var i in arr2){
            var bb=true;
            for(var b in arr1){
                if(arr1[b][key]==arr2[i][key]){
                    bb=false;
                    break;
                }
            }
            if(bb)
                arr1.push(arr2[i]);
        }
        return arr1
    }

  echartsB.on('dblclick', function (params) {
                console.log(params);//dataIndex data
                var type=params.dataType
                if(type=='node'){
                    $.ajax({
                        url:"{{=URL('admin','graphCrudResult_dbquery.json')}}",
                        type: "POST",
                        data:JSON.stringify(params.data),
                        headers:{
                            "cube_user_token":"123token",
                            "Content-Type":"application/json"
                        },
                        contentType: 'text/html; charset=UTF-8',
                        dataType: "json",
                        success: function(data) {
                            if(data.data.length>0){
                                var options = echartsB.getOption();//获取已生成图形的Option
                                var nodesOption = options.series[0].data;//获得所有节点的数组
                                var linksOption = options.series[0].links;
                                var categorysOption = options.series[0].categories;
                                uq(nodesOption,data.data,"name");
                                uq(linksOption,data.link,"name");
                                uq(categorysOption,data.categorys,"name");
                                echartsB.setOption(options);
                             }
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            alert(errorThrown);
                        },
                        complete: function(XMLHttpRequest, textStatus) {
                        }

                     });
                }


            });
document.oncontextmenu = function () { return false; };
echartsB.on('contextmenu', function (params) {
    if(params.dataType=="node"){
        console.log(params);
            var menuuu=$("#menuuu");
            menuuu.empty();
            menuuu.append('<ul>' +
                    '<li class="ui-context-menu-item"><a onclick="add('+JSON.stringify(params.data).replace(/"/g, "&quot;")+',1,\'新增节点\','+params.dataIndex+')">新增节点</a></li>' +
                    '<li class="ui-context-menu-item"><a onclick="add('+JSON.stringify(params.data).replace(/"/g, "&quot;")+',2,\'新增父节点\','+params.dataIndex+')">新增父节点</a></li>' +
                    '<li class="ui-context-menu-item"><a onclick="add('+JSON.stringify(params.data).replace(/"/g, "&quot;")+',3,\'新增子节点\','+params.dataIndex+')">新增子节点</a></li>' +
                    '<li class="ui-context-menu-item"><a onclick="add('+JSON.stringify(params.data).replace(/"/g, "&quot;")+',4,\'删除节点\','+params.dataIndex+')">删除节点</a></li>' +
                    '</ul>');
            var event = params.event.event;
            var pageX = event.offsetX+20;
            var pageY = event.offsetY+20;
            menuuu.css("left",pageX + 'px');
            menuuu.css("top",pageY + 'px');
            menuuu.css("display","block");
    }
});
    function add(params,type,str,dataIndex){
        console.info(params,type,str)
        $('#my-addnode-edit').text(str);
        $('#addnode').tagsinput('removeAll');
        $('#addnode_prokey').tagsinput('removeAll');
        $('#addrelkey').tagsinput('removeAll');
        $('#addrelkey_prokey').tagsinput('removeAll');
        if(type=="4"){//删除
             $('#addnode').tagsinput('destroy');
             $('#addnode').hide();
             $('#addnode_prokey').tagsinput('destroy');
             $('#addnode_prokey').hide();
             $('#addrelkey').tagsinput('destroy');
             $('#addrelkey').hide();
             $('#addrelkey_prokey').tagsinput('destroy');
             $('#addrelkey_prokey').hide();
        }else if(type=="1"){//新增
             $('#addnode').tagsinput('removeAll');
             $('#addnode').tagsinput('add', params.labels);
             $('#addrelkey').tagsinput('destroy');
             $('#addrelkey').hide();
             $('#addrelkey_prokey').tagsinput('destroy');
             $('#addrelkey_prokey').hide();
        }else{
             $('#addnode').tagsinput('removeAll');
             $('#addnode').tagsinput('add', params.labels);
        }

        $('#my-addnode').modal({
                      dimmer:false,
                      relatedTarget: [params,dataIndex,echartsB,type],
                      onConfirm: function(e) {
                            var p=this.relatedTarget;
                            console.info("p",p);
                            debugger;

                            var data_param={"data":p[0], "type":p[3],"add":e.data}
                            $.ajax({
                                url:"{{=URL('admin','graphCrudResult_crud.json')}}",
                                type: "POST",
                                data:JSON.stringify(data_param),
                                headers:{
                                    "cube_user_token":"123token",
                                    "Content-Type":"application/json"
                                },
                                contentType: 'text/html; charset=UTF-8',
                                dataType: "json",
                                success: function(data) {
                                    if(data.type=="4"){//删除
                                        if(data.count=="0"){
                                            var options = p[2].getOption();//获取已生成图形的Option
                                            var nodesOption = options.series[0].data;//获得所有节点的数组
                                            nodesOption.splice(p[1], 1);
                                            var start = new Date().getTime();
                                            p[2].setOption(options);
                                            var end = new Date().getTime();
                                            $('#graphtime').text((end-start)+"ms");
                                            $('#querytime').text(data.time+"ms" );
                                        }else{alert("删除未成功！")}
                                    }else if(data.type=="1" ||data.type=="2"||data.type=="3"){//新增
                                        console.info(data);
                                         if(data.data.length>0){
                                            var options = p[2].getOption();//获取已生成图形的Option
                                            var nodesOption = options.series[0].data;//获得所有节点的数组
                                            var linksOption = options.series[0].links;
                                            var categorysOption = options.series[0].categories;
                                            uq(nodesOption,data.data,"name");
                                            uq(linksOption,data.link,"name");
                                            uq(categorysOption,data.categorys,"name");
                                            p[2].setOption(options);
                                         }
                                    }
                                },
                                error: function(XMLHttpRequest, textStatus, errorThrown) {
                                    alert(errorThrown);
                                },
                                complete: function(XMLHttpRequest, textStatus) {
                                }

                             });
                      }
                    });
    }


  echartsB.on('click', function (params) {
              console.log(params);//dataIndex data dataType
              var tool=$("#tool");
              var type=params.dataType
              tool.empty()
              tool.append("<span class='am-badge am-badge-secondary am-round'>"+params.data.labels+":</span>  ");
              for(i in params.data){
                     tool.append("<a onclick='onchangeLabel(this,\""+type+"\")' class='am-badge'>"+i+"</a>= <span class='am-badge am-badge-warning'>"+params.data[i]+"</span> ");
              }
            });

  	function onchangeLabel(obj,type) {
	    var name=obj.innerText
        var options = echartsB.getOption();
	    console.info(options)
        if(type=='node'){
	        options.series[0].label= {
                                "normal": {
                                    "show": true,
                                    "textStyle": {
                                        "fontSize": 12
                                    },
                                    formatter: function(param) {
                                        return param.data[name];
                                    }
                                }
                            }
        }else{
            options.series[0].edgeLabel= {
                                "normal": {
                                    "show": true,
                                    "textStyle": {
                                        "fontSize": 11
                                    },
                                    formatter: function(param) {

                                        return param.data[name];
                                    }
                                }
                            }
        }


        echartsB.setOption(options);

    }
</script>

</body>
</html>